<template>
<div class="body-container">
    <ul>
        <router-link :to="{path:'/discount',query:{type:'wdhj'}}">
            <li><i class="left wdhj"></i><div class="content">我的还价</div><i class="right"></i></li>
        </router-link>       
        <router-link :to="{path:'/collection',query:{type:'wdsc'}}">
            <li><i class="left wdsc"></i><div class="content">我的收藏</div><i class="right"></i></li>
        </router-link>
    </ul>
    <ul>
        <router-link :to="{path:'/register',query:{type:'wddj'}}">
            <li><i class="left wddj"></i><div class="content">我的登记</div><i class="right"></i></li>
        </router-link>  
        <router-link :to="{path:'/sale',query:{type:'wdcs'}}">
            <li><i class="left wdcs"></i><div class="content">我的出售</div><i class="right"></i></li>
        </router-link>        
        <li><i class="left wdqb"></i><div class="content">我的钱包</div><i class="right"></i></li>
    </ul>
    <ul>
        <li><i class="left wxtx"></i><div class="content">微信提醒服务<span>实时获取交易信息</span></div><i class="right"></i></li>
        <li><i class="left sjh"></i>
            <div class="content" >手机号
            <em class="phone">{{phone}}</em>
            </div>
            <i class="right"></i>
        </li>
        <li><i class="left bzzx"></i><div class="content">帮助中心</div><i class="right"></i></li>
        <li><i class="left yjfk"></i><div class="content">意见反馈</div><i class="right"></i></li>
        <li><i class="left zskf"></i><div class="content">专属客服</div><i class="right"></i></li>
    </ul>
    <div class="logout" v-show="Userinfo.status" @click="logout">退出登录</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
    name:'MineBody',
    props:{
        Userinfo:Object
    },
    methods:{       
        logout(){
            axios.post("http://81.68.253.206:8081/api/logout"
            ,{},
            {
             headers: {
               'token': localStorage.getItem("UserToken") }
            }
            ).then(res=>{
            if(res.data&&res.data.data&&res.data.status)
             {
                localStorage.setItem("UserToken","");
                localStorage.setItem("UserName","");
                this.$router.push('/tool/home')
             }

        })
        }
    },
    computed:{
        phone(){
            var result="";
            if(this.Userinfo.data==null){
                return result;
            }
            else{
                return this.Userinfo.data.phone.replace(new RegExp("(\\d{3})(\\d{4})(\\d{4})"),"$1****$3");
            }
        }
  }
    
}
</script>
<style lang="scss" scoped>
.body-container{
    width: 100%;
    margin-bottom: rem(170);
    .logout{
        width: 100%;
         height: rem(150);
        line-height: rem(150);
        background-color: #fff;
        margin-top: rem(15);
        text-align: center;
        font-size: rem(40);
        color: #e74e4b;
    }
    ul{
        width: 100%;
        background-color: #fff;
        margin-top: rem(15);
        li{
            display: flex;
            height: rem(150);
            line-height: rem(150);
            margin: 0 rem(30);
            cursor: pointer;
            border-bottom: 1px solid #f5f5f5;
            .left{
                width: rem(50);
                height:rem(50);
                margin-top: rem(50);
                margin-right: rem(40);
            }
            .right{
                width: rem(50);
                height:rem(50);
                margin-top: rem(50);
                background: url(../../../../assets/imgs/toright.svg) no-repeat 50% 50%;
                background-size: 100% 100%;
            }
            .content{
                position: relative;
                flex: 1;
                height: rem(50);
                font-size:rem(40);
                .phone{
                    position: absolute;
                    font-size: rem(40);
                    right: rem(20);
                    color: #888;
                    font-style: normal;
                }
                span{
                    position: absolute;
                    font-size: rem(40);
                    right: rem(20);
                    color: #888;
                }
            }
            .wdhj{
                background: url(../../../../assets/imgs/wdhj.svg) no-repeat 50% 50%;
                background-size: auto 100%;
            }
            .wdsc{
                background: url(../../../../assets/imgs/wdsc.svg) no-repeat 50% 50%;
                background-size: auto 100%;
            }
            .wddj{
                background: url(../../../../assets/imgs/wddj.svg) no-repeat 50% 50%;
                background-size: auto 100%;
            }
            .wdcs{
                background: url(../../../../assets/imgs/wdcs.svg) no-repeat 50% 50%;
                background-size: auto 100%;
            }
            .wdqb{
                background: url(../../../../assets/imgs/wdqb.svg) no-repeat 50% 50%;
                background-size: auto 100%;
            }
            .wxtx{
                background: url(../../../../assets/imgs/wxtxfw.svg) no-repeat 50% 50%;
                background-size: auto 100%;
            }
            .sjh{
                background: url(../../../../assets/imgs/sjh.svg) no-repeat 50% 50%;
                background-size: auto 100%;
            }
            .bzzx{
                background: url(../../../../assets/imgs/bzzx.svg) no-repeat 50% 50%;
                background-size: auto 100%;
            }
            .yjfk{
                background: url(../../../../assets/imgs/yjfk.svg) no-repeat 50% 50%;
                background-size: auto 100%;
            }
            .zskf{
                background: url(../../../../assets/imgs/zskf.svg) no-repeat 50% 50%;
                background-size: auto 100%;
            }

        }
    }
}
    




</style>